<template>
  <view class="log-pic-item flex">
    <view class="pic-box" :class="[question?.type === 8 ? 'big-pic-box' : 'small-pic-box']">
      <view v-if="question?.type === 8" class="pic-wraper">
        <image class="log-pic-img" :class="[(question?.type === 8 && questionIndex) && 'translate-item']" src="https://app5.shuguostar.cn/imgs/images/demo/longPic_1.png" />
      </view>

      <template v-if="question?.type === 9">
        <image class="static-img" src="https://app5.shuguostar.cn/imgs/images/demo/longPic_2.png" />
        <image class="static-icon1" src="https://app5.shuguostar.cn/imgs/images/demo/label_1.png" />
        <image class="static-icon2" src="https://app5.shuguostar.cn/imgs/images/demo/label_2.png" />
      </template>
    </view>

    <view v-if="question?.type === 8" class="text-wrap" :class="[isPlay && 'shake']" :style="{ top, left }">
      <view class="text">
        {{ question?.questionList?.[questionIndex].title }}
      </view>
    </view>

    <view v-if="question?.type === 9" class="pic-question">
      <view v-for="(quest, index) in question?.questionList" :key="`${index}title`" class="title">
        <text v-if="index === 0" class="lable">
          填空题
        </text>
        <template v-for="(item, i) in quest.title" :key="i">
          <text v-if="item.type === 'text'" class="text">
            {{ item.content }}
          </text>
          <up-input
            v-else
            v-model="answerTextList[item.inputIndex || 0]"
            placeholder=""
            border="bottom"
          />
        </template>
      </view>
    </view>

    <up-popup :show="showPopup" mode="center" :round="10" :close-on-click-overlay="false" @close="handleClose" @open="handleShowPopup()">
      <view class="fill-content flex flex-col items-center">
        <view class="text-box flex">
          <text v-if="!answerList[questionIndex]?.length" class="text">
            请选择下面元素组成答案吧
          </text>
          <text v-for="item in answerList[questionIndex]" v-else :key="`${item.text}top`" class="text-item" @click="handleClick(1, item.text, item.index)">
            {{ item.text }}
          </text>
        </view>

        <view class="text-group flex flex-wrap justify-center">
          <text v-for="(item, index) in question?.questionList?.[questionIndex]?.content" :key="item" :class="[!item ? 'no-text' : 'text']" @click="handleClick(2, item, index)">
            {{ item }}
          </text>
        </view>

        <image class="close-icon" src="https://app5.shuguostar.cn/imgs/images/demo/confirm.png" @click="handleConfirm" />
      </view>
    </up-popup>
  </view>
</template>

<script setup lang="ts" name="LongPicItem">
import type { LongPicQuestion } from '@/pages/views/demo/type';

const props = defineProps({
  question: {
    type: Object as () => LongPicQuestion,
    default: () => {},
  },
});

const emit = defineEmits(['next', 'nextGame']);

const hDivideW = ref<number>(0);
onLoad(() => {
  uni.getSystemInfo({
    success: (res: any) => {
      hDivideW.value = res.screenHeight / res.screenWidth;
    },
  });
});

const questionIndex = ref<number>(0); // 下标
const answerTextList = ref<Array<string>>([]);
const answerList = ref<Array<Array<{ index: number; text: string }>>>([]);
const top = ref<string>('');
const left = ref<string>('');
const getTextStyle = () => {
  top.value = questionIndex.value ? `${80 * hDivideW.value}rpx` : `${46 * hDivideW.value}rpx`;
  left.value = questionIndex.value ? `${596 * hDivideW.value}rpx` : `${66 * hDivideW.value}rpx`;
};

const handleClick = (type: number, text: string, index: number) => {
  if (!text)
    return;

  if (type === 1) {
    answerList.value[questionIndex.value] = answerList.value[questionIndex.value].filter((item: { index: number; text: string }) => item.text !== text);
    const list = props.question.questionList[questionIndex.value]!.content!;
    list[index] = text;
    props.question.questionList[questionIndex.value]!.content! = list;
  }
  else {
    if (!answerList.value[questionIndex.value])
      answerList.value[questionIndex.value] = [];
    answerList.value[questionIndex.value].push({
      index,
      text,
    });
    const list = props.question.questionList[questionIndex.value]!.content!;
    list[index] = '';
    props.question.questionList[questionIndex.value]!.content! = list;
  }
};

// 弹出框
const showPopup = ref<boolean>(false);
const handleShowPopup = () => {
  showPopup.value = true;
};

const handleClose = () => {
  showPopup.value = false;
};

const isPlay = ref<boolean>(false);
const longPic1 = 'https://app5.shuguostar.cn/imgs/bookVido/audio/longPic1.mp3';
const longPic2 = 'https://app5.shuguostar.cn/imgs/bookVido/audio/longPic2.mp3';
const longPic3 = 'https://app5.shuguostar.cn/imgs/bookVido/audio/longPic3.mp3';
let innerAudioContext: any;
const playAudio = () => {
  innerAudioContext = uni.createInnerAudioContext();
  innerAudioContext.autoplay = true;
  innerAudioContext.src = props.question.type === 9 ? longPic3 : questionIndex.value ? longPic2 : longPic1;
  innerAudioContext.onPlay(() => {
    isPlay.value = true;
  });
  innerAudioContext.onEnded(() => {
    isPlay.value = false;
    if (props.question.type === 8)
      handleShowPopup();
  });
};

const pauseAudio = () => {
  innerAudioContext?.destroy();
  innerAudioContext = null;
};
const start = () => {
  playAudio();
  if (props.question.type === 8) {
    getTextStyle();
  }
};

const handleConfirm = () => {
  showPopup.value = false;
  questionIndex.value++;
  emit('next');

  if (questionIndex.value >= props.question.questionList.length) {
    emit('nextGame');
    return;
  }

  setTimeout(() => {
    start();
  }, 1000);
};

watch(() => props.question?.id, () => {
  answerTextList.value = [];
  answerList.value = [];
  questionIndex.value = 0;
  start();
}, { deep: true });

defineExpose({
  questionIndex,
  answerList,
  answerTextList,
  pauseAudio,
});
</script>

<style lang="scss" scoped>
@function tovmin($rpx){//$rpx为需要转换的字号
  @return #{calc($rpx * 100 / 750)}vmin;
}

.log-pic-item {
  position: relative;
  width: tovmin(1180);
  margin: tovmin(40);

  .pic-box {
    padding: tovmin(10);
    border-radius: tovmin(12);
    background: #fff;
  }

  .big-pic-box {
    width: tovmin(1060);
    height: tovmin(605);
    margin: tovmin(0) tovmin(60);
  }

  .small-pic-box {
    position: relative;
    width: tovmin(710);
    height: tovmin(480);

    .static-icon1, .static-icon2 {
      position: absolute;
      width: tovmin(48);
      height: tovmin(48);
    }

    .static-icon1 {
      top: tovmin(66);
      left: tovmin(230);
    }

    .static-icon2 {
      top: tovmin(240);
      left: tovmin(384);
    }
  }

  .pic-wraper {
    position: relative;
    width: tovmin(1040);
    height: tovmin(585);
    border-radius: tovmin(12);
    overflow: hidden;
  }

  .translate-item {
    transform: translateX(-tovmin(108));
    transition: all 1s ease;
  }

  .shake {
    animation: shake 3000ms ease-in-out;
  }

  .log-pic-img {
    width: tovmin(1148);
    height: tovmin(585);
    border-radius: tovmin(12);
  }

  .static-img {
    width: tovmin(690);
    height: tovmin(460);
    border-radius: tovmin(12);
  }

  .text-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: tovmin(300);
    height: tovmin(68);
    margin-left: tovmin(24);
    background-image: url('https://app5.shuguostar.cn/imgs/images/demo/text_bg.png');
    background-size: 100% 100%;

    .text {
      font-size: tovmin(24);
      line-height: tovmin(68);
      text-align: center;
      transform: rotate(-10deg);
      -webkit-transform: rotate(-10deg);
    }
  }

  .pic-question {
    height: tovmin(480);;
    padding: tovmin(16) tovmin(12);
    margin-left: tovmin(12);
    background: #fff;
    border-radius: tovmin(12);

    .title {
      padding-bottom: tovmin(12);
      line-height: 1;

      .lable {
        display: inline-block;
        margin: tovmin(6) tovmin(12) tovmin(6) 0;
        padding: 0 tovmin(12);
        font-size: tovmin(20);
        line-height: tovmin(34);
        color: #fff;
        background: #22BF57;
        border-radius: 0 tovmin(12) tovmin(12) 0;
      }

      .input-text {
        display: inline;
      }

      .text {
        padding: tovmin(6) 0;
        font-size: tovmin(24);
        line-height: tovmin(32);
        color: #333;
      }
    }

    .fill-content {
      padding: tovmin(80) tovmin(40);

      .text-box {
        width: 100%;
        height: tovmin(74);
        padding: tovmin(6) tovmin(10);
        border-bottom: tovmin(2) solid #797979;

        .text {
          display: block;
          font-size: tovmin(20);
          text-align: center;
          line-height: tovmin(24);
          color: #C1BFBF;
        }

        .text-item {
          display: inline-block;
          width: tovmin(60);
          height: tovmin(60);
          font-size: tovmin(28);
          line-height: tovmin(56);
          text-align: center;
          color: #555;
          border: 2rpx solid #555;
          border-radius: tovmin(8);
          margin: 0 tovmin(8);
        }
      }

      .text-group {
        padding-top: tovmin(80);

        .text {
          width: tovmin(60);
          height: tovmin(60);
          font-size: tovmin(28);
          line-height: tovmin(56);
          text-align: center;
          color: #555;
          border: tovmin(2) solid #555;
          border-radius: tovmin(8);
          margin: 0 tovmin(8);
        }

        .no-text {
          width: tovmin(60);
          height: tovmin(60);
          margin: 0 tovmin(8);
          border-radius: tovmin(8);
          background: #ddd;
        }
      }
    }
  }

  .fill-content {
    position: relative;
    padding: tovmin(80) tovmin(80) tovmin(160) tovmin(80);

    .text-box {
      width: 100%;
      height: tovmin(74);
      padding: tovmin(6) tovmin(10);
      border-bottom: tovmin(2) solid #797979;

      .text {
        flex: 1;
        font-size: tovmin(24);
        text-align: center;
        line-height: tovmin(64);
        color: #C1BFBF;
      }

      .text-item {
        display: inline-block;
        width: tovmin(60);
        height: tovmin(60);
        font-size: tovmin(28);
        line-height: tovmin(56);
        text-align: center;
        color: #555;
        border: tovmin(2) solid #555;
        border-radius: tovmin(8);
        margin: 0 tovmin(8);
      }
    }

    .text-group {
      padding-top: tovmin(80);

      .text {
        width: tovmin(60);
        height: tovmin(60);
        font-size: tovmin(28);
        line-height: tovmin(56);
        text-align: center;
        color: #555;
        border: tovmin(2) solid #555;
        border-radius: tovmin(8);
        margin: 0 tovmin(8);
      }

      .no-text {
        width: tovmin(60);
        height: tovmin(60);
        margin: 0 tovmin(8);
        border-radius: tovmin(8);
        background: #ddd;
      }
    }

    .close-icon {
      position: absolute;
      bottom: tovmin(40);
      right: tovmin(40);
      width: tovmin(64);
      height: tovmin(64);
    }
  }
}

@keyframes shake {
  10%, 90% { transform: scale(0.9); }
  20%, 80% { transform: scale(1.1); }
  30%, 70% { transform: scale(0.9); }
  40%, 60% { transform: scale(1.1); }
  50% { transform: scale(0.9); }
}
</style>
